<template>
  <div class="tip">
     <div id="tip" v-show="tip.status"><span>{{tip.msg}}</span></div>
     <div id="loading" v-show="loading.status">
          <p><img src="../assets/loading.gif">{{loading.msg}}</p>
     </div> 
     <div class="loader" v-show="loader.show">
        <div class="loader-inner line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
     </div>
  </div>
</template>

<script>
export default {
    props:['tip','loading','loader']
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

#tip
{
    width:100%;
    position:fixed;
    left:0;
    top:50%;
    margin-top:-0.5rem;
    text-align:center;
    span
    {
        line-height:1rem;
        height:1rem;
        display:inline-block;
        padding:0.1rem 0.2rem;
        background:rgba(0,0,0,0.9);
        color:#fff;
        border-radius:0.1rem;
    }
}
#loading
{
    width:100%;
    position:fixed;
    left:0;
    top:50%;
    margin-top:-1rem;
    text-align:center;
    p
    {
        display:inline-block;
        padding:0.2rem 0.4rem;
        background:rgba(0,0,0,0.8);
        color:#fff;
        border-radius:0.1rem;
        font-size:0.28rem;
        img
        {
            display:block;
            width:0.8rem;
            margin:0 auto 0.2rem auto;
        }
    }
}
.loader
{
    text-align:center;
    padding:1rem 0;
}
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }

  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }

  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.1s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.2s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.3s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.4s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08);
          animation: line-scale 1s 0.5s infinite cubic-bezier(.2, .68, .18, 1.08); }
.line-scale > div {
  background-color: #078def;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }
</style>
